<template>
  <div class="passwor_strength_progress_container">
    <div class="item_box" :class="{ l_0: strengthLevel >= 0 }">
      <!-- <span class="left_block"></span> -->
      <span class="right_block"></span>
    </div>

    <div class="item_box" :class="{ l_1: strengthLevel >= 1 }">
      <span class="left_block"></span>
      <span class="right_block"></span>
    </div>

    <div class="item_box" :class="{ l_2: strengthLevel >= 2 }">
      <span class="left_block"></span>
      <span class="right_block"></span>
    </div>

    <div class="item_box" :class="{ l_3: strengthLevel >= 3 }">
      <span class="left_block"></span>
      <span class="right_block"></span>
    </div>

    <div class="item_box" :class="{ l_4: strengthLevel >= 4 }">
      <span class="left_block"></span>
      <!-- <span class="right_block"></span> -->
    </div>
  </div>
</template>

<script>
import { computed } from "vue";

export default {
  name: "PasswordStrengthProgress",
  props: {
    password: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const checkPassword = (password) => {
      if (password === null || password === "" || password === undefined) {
        return -1;
      }
      let level = 0;
      if (password.length < 6) {
        return 0;
      }
      // 如果用户输入的密码 包含了数字
      if (/\d/.test(password)) {
        level++;
      }
      // 如果用户输入的密码 包含了小写的a到z
      if (/[a-z]/.test(password)) {
        level++;
      }
      // 如果用户输入的密码 包含了大写的A到Z
      if (/[A-Z]/.test(password)) {
        level++;
      }
      // 如果是非数字 字母 下划线
      if (/\W/.test(password)) {
        level++;
      }
      return level;
    };

    const strengthLevel = computed(() => {
      return checkPassword(props.password);
    });

    return {
      strengthLevel,
    };
  },
};
</script>

<style lang="less" scoped>
.passwor_strength_progress_container {
  background: #fff;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  //   background-image: linear-gradient(to left, #67c23a 20%, #e6a23c 50%, #f56c6c);
  .item_box {
    height: 8px;
    flex: 1;
    background: #ccc;
    position: relative;
    overflow: hidden;
    transition: all 0.3s linear;
    &.l_0 {
      background: #f56c6c;
    }
    &.l_1 {
      background: rgb(237, 135, 83);
    }
    &.l_2 {
      background: #e6a23c;
    }
    &.l_3 {
      background: rgb(177, 176, 59);
    }
    &.l_4 {
      background: #67c23a;
    }
    .left_block {
      position: absolute;
      left: 0px;
      top: 0px;
      height: 0px;
      width: 0px;
      border: 4px solid #fff;
      border-right: 4px solid transparent;
      border-bottom: 4px solid transparent;
    }
    .right_block {
      position: absolute;
      right: 0px;
      bottom: 0px;
      height: 0px;
      width: 0px;
      border: 4px solid #fff;
      border-left: 4px solid transparent;
      border-top: 4px solid transparent;
    }
  }
}
</style>
